<!DOCTYPE html>
<html>
<head>
    <title>成绩详情 - 学生成绩管理系统</title>
    <link rel="stylesheet" href="/static/css/home.css">
    <link rel="stylesheet" href="/static/css/list.css">
    <link rel="stylesheet" href="/static/css/scores.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav class="top-nav">
        <div class="nav-content">
            <a href="/" class="logo">学生成绩管理系统</a>
            <div class="user-info">
                <span class="welcome-text">欢迎，{{ request.user.username }}</span>
                <a href="{% url 'accounts:logout' %}" class="logout-btn">退出登录</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <main class="main-content">
            <h1 class="page-title"><i class="fas fa-chart-line"></i> 成绩详情</h1>

            <div class="detail-card score-detail-card">
                <div class="detail-header">
                    <div class="score-badge 
                        {% if score.score >= 90 %}score-excellent
                        {% elif score.score >= 80 %}score-good
                        {% elif score.score >= 60 %}score-pass
                        {% else %}score-fail{% endif %}">
                        <div class="score-number">{{ score.score }}</div>
                        <div class="score-text">
                            {% if score.score >= 90 %}优秀
                            {% elif score.score >= 80 %}良好
                            {% elif score.score >= 70 %}中等
                            {% elif score.score >= 60 %}及格
                            {% else %}不及格{% endif %}
                        </div>
                    </div>
                    <h2>{{ score.student.name }} 的成绩记录</h2>
                </div>
                
                <div class="detail-content">
                    <div class="detail-section">
                        <h3><i class="fas fa-user-graduate"></i> 学生信息</h3>
                        <div class="detail-row">
                            <span class="detail-label">学生姓名：</span>
                            <span class="detail-value">{{ score.student.name }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">所在班级：</span>
                            <span class="detail-value">
                                {% if score.grade %}
                                    <i class="fas fa-users"></i> {{ score.grade.grade_name }}
                                {% else %}
                                    <i class="fas fa-exclamation-circle" style="color: #ff9800;"></i> 未设置
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="detail-section">
                        <h3><i class="fas fa-book"></i> 成绩信息</h3>
                        <div class="detail-row">
                            <span class="detail-label">科目：</span>
                            <span class="detail-value">📖 {{ score.subject }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">学期：</span>
                            <span class="detail-value">📅 {{ score.term }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">成绩：</span>
                            <span class="detail-value">
                                <strong style="font-size: 1.2em;">{{ score.score }} 分</strong>
                                <span class="score-level">
                                    {% if score.score >= 90 %}🌟 优秀
                                    {% elif score.score >= 80 %}👍 良好
                                    {% elif score.score >= 70 %}✨ 中等
                                    {% elif score.score >= 60 %}👌 及格
                                    {% else %}⚠️ 不及格{% endif %}
                                </span>
                            </span>
                        </div>
                    </div>

                    <div class="detail-section">
                        <h3><i class="fas fa-info-circle"></i> 其他信息</h3>
                        <div class="detail-row">
                            <span class="detail-label">记录日期：</span>
                            <span class="detail-value">{{ score.date_recorded|date:"Y年m月d日" }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">记录时间：</span>
                            <span class="detail-value">{{ score.date_recorded|date:"H:i:s" }}</span>
                        </div>
                    </div>
                </div>

                <div class="detail-actions">
                    <a href="{% url 'scores:score_list' %}" class="btn-back">
                        <i class="fas fa-arrow-left"></i> 返回列表
                    </a>
                    <a href="{% url 'scores:score_edit' score.pk %}" class="btn-edit">
                        <i class="fas fa-edit"></i> 编辑成绩
                    </a>
                    <button type="button" class="btn-delete" onclick="showDeleteModal()">
                        <i class="fas fa-trash"></i> 删除记录
                    </button>
                </div>
            </div>

            <!-- 删除确认模态框 -->
            <div id="deleteModal" class="modal">
                <div class="modal-content score-modal">
                    <div class="modal-header">
                        <h3><i class="fas fa-exclamation-triangle"></i> 确认删除</h3>
                        <span class="close" onclick="hideDeleteModal()">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div class="delete-warning">
                            <i class="fas fa-exclamation-triangle" style="color: #f44336; font-size: 2em; margin-bottom: 15px;"></i>
                            <p><strong>确定要删除这条成绩记录吗？</strong></p>
                            <p>学生：{{ score.student.name }}</p>
                            <p>科目：{{ score.subject }}</p>
                            <p>成绩：{{ score.score }} 分</p>
                            <p style="color: #f44336; font-size: 0.9em;">⚠️ 此操作无法撤销，请谨慎操作！</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-cancel" onclick="hideDeleteModal()">
                            <i class="fas fa-times"></i> 取消
                        </button>
                        <form method="post" action="{% url 'scores:score_delete' score.pk %}" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn-confirm">
                                <i class="fas fa-trash"></i> 确认删除
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        </main>
    </div>

    <script>
        function showDeleteModal() {
            document.getElementById('deleteModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }

        function hideDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复滚动
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('deleteModal');
            if (event.target == modal) {
                hideDeleteModal();
            }
        }

        // ESC键关闭模态框
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                hideDeleteModal();
            }
        });
    </script>
</body>
</html>